<template>
  <div class="ly-mask" @click="tiggerShow" v-if="isVisbile" :style="styleObj">
  </div>
</template>
<script>
export default {
  name:'LyMask',
  props:{
    'is-apend-body':{
      type:Boolean,
      default:false
    },
    params:{
      type:Object,
      default(){
        return {
          background:'#000'
        }
      }
    }
  },
  data() {
    return {
      isVisbile:true
    }
  },
  computed:{
    styleObj(){
      return {
        'z-index':this.params.zIndex||2000,
        background:this.params.background
      }
    }
  },
  mounted() {
  },
  methods:{
    tiggerShow(){
      if(this.$options._parentVnode&&Array.isArray(this.$options._parentVnode.data.directives)){
        this.$parent[this.$options._parentVnode.data.directives.find(v => v.rawName == 'v-show').expression] = false
      }else{
        this.isVisbile = false
      }
    }
  }
}
</script>
<style lang="scss">
  .ly-mask{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background: #000;
  }
</style>